<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Faeple</title>
<link href="/resources/css/bootstrap.css?20141016" rel="stylesheet">
<style type="text/css">
html, body{
	background-color: #E5E5E5;
	height: 100%;
	font-family:"나눔고딕",NanumGothic,"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","돋움",dotum,Arial,sans-serif;
}
html {
	display: table;
	width: 100%;
}
body {
	display: table-cell;
	vertical-align: middle;
}
.content{
	margin:0 auto;
	background-color: #fff;
}
span{
	color: #555555;
}
</style>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script>
function resetPasswd(obj){
	if($("#passwd1").val() != ""){
		if($("#passwd1").val() == $("#passwd2").val()){
			var data = $("#passwdForm").serialize();
			$.ajax({
			    url : "/recoveryResetPasswd"
			    , data : data
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	alert("다시 시도해주세요");
			    	$("#submitBtn").html("확인").removeAttr("disabled","disabled");
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		alert("비밀번호가 성공적으로 변경되었습니다.\n변경된 비밀번호로 로그인 해주세요");
			    		location.href = "/";
			    	}else{
			    		alert("다시 시도해주세요");
			    	}
			    }
			    , beforeSend: function() {
			    	$("#submitBtn").html("전송중..").attr("disabled","disabled");
			    }
			    , complete: function() {
			    	$("#submitBtn").html("확인").removeAttr("disabled","disabled");
			    }
			});
		}else{
			alert("비밀번호 재입력을 확인해 주세요");
			$("#passwd2").parent().parent().addClass("has-error");
		}
	}else{
		alert("새 비밀번호를 입력해 주세요");
		$("#passwd1").focus();
	}
}
</script>
</head>
<body>
	<div class="col-md-6 well well-lg col-md-offset-3" style="background-color: #fff;">
		<h4 style="margin-bottom: 30px;">비밀번호 재설정</h4>
		<h5 style="margin-bottom: 30px;">새로운 비밀번호를 설정해 주세요</h5>
		<form id="passwdForm" class="form-horizontal" role="form">
			<input type="hidden" id="key" name="key" value="${key}">
			<div class="form-group">
				<label for="passwd1" class="col-md-4 control-label">새 비밀번호</label>
				<div class="col-md-6">
					<input type="password" class="form-control" id="passwd1" name="passwd1" maxlength="20" placeholder="새 비밀번호">
				</div>
			</div>
			
			<div class="form-group">
				<label for="passwd2" class="col-md-4 control-label">새 비밀번호 재입력</label>
				<div class="col-md-6">
					<input type="password" class="form-control" id="passwd2" name="passwd2" maxlength="20" placeholder="새 비밀번호 재입력" onkeypress="if (event.keyCode == 13) { resetPasswd(); }">
				</div>
			</div>
			
			<div class="form-group" style="margin-top: 25px;">
				<div class="col-md-offset-4 col-md-6">
					<button type="button" id="submitBtn" class="btn btn-primary" onclick="resetPasswd()">확인</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>